<template>
  <view class="center">
    <view class="header">
      <image src="../../static/image/preview.jpg" mode=""></image>
      <cover-view class="iconfont icon-zhankai"></cover-view>
    </view>
    <view class="userInfo">
      <view class="author">
        <image src="../../static/image/preview.jpg" mode=""></image>
        <view class="iconfont icon-shumajiadian"></view>
      </view>
      <view class="editdata" @click="toChangeInfo">编辑资料</view>
      <view class="correlation">&</view>
    </view>
    <center-detail></center-detail>
    <tab-control @btnClick="btnClick"></tab-control>
    <center-video-list :videoList="videoList" ref="videoList"></center-video-list>
    <tab-bar currentIndex="4"></tab-bar>
  </view>
</template>

<script>
import CenterDetail from '../../components/content/center/CenterDetail.vue'
import TabControl from '../../components/content/center/TabControl.vue'
import CenterVideoList from '../../components/content/center/CenterVideoList.vue'
import request from '../../network/request.js'
export default {
  components: { CenterDetail, TabControl, CenterVideoList },
  data() {
    return { videoList: [] }
  },
  onLoad() {
    this.getFollowVideo(249121)
  },
  methods: {
    async getFollowVideo(id) {
      const { datas } = await request('/video/group', { id })
      this.videoList = datas
    },
    btnClick(index) {
      if (index === 0) {
        this.getFollowVideo(249121)
      } else if (index === 1) {
        this.getFollowVideo(243123)
      } else {
        this.getFollowVideo(1101)
      }
      this.$refs.videoList.currentIndex = -1
    },
    toChangeInfo() {
      uni.navigateTo({ url: '/pages/ChangeInfo/ChangeInfo' })
    }
  }
}
</script>

<style lang="scss">
.center {
  background: #171827;
  .header {
    height: 300rpx;
    position: relative;
    image {
      height: 100%;
      width: 100%;
    }
    .icon-zhankai {
      position: absolute;
      top: 60rpx;
      left: 30rpx;
      font-size: 36rpx;
      color: #fff;
      background: #3b3a46;
      border-radius: 50%;
      border: 10rpx solid #3b3a46;
    }
  }
  .userInfo {
    height: 100rpx;
    padding: 0 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .author {
      height: 140rpx;
      width: 140rpx;
      border-radius: 50%;
      border: 6rpx solid #171827;
      position: relative;
      overflow: hidden;
      image {
        height: 100%;
        width: 100%;
        position: relative;
      }
      .icon-shumajiadian {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 50rpx;
        color: #fff;
      }
    }
    .editdata {
      height: 60rpx;
      width: 460rpx;
      background: #393b45;
      text-align: center;
      line-height: 60rpx;
      border-radius: 6rpx;
      color: #fff;
      font-size: 28rpx;
      box-shadow: 0 0 3rpx 3rpx #000;
    }
    .correlation {
      height: 60rpx;
      width: 60rpx;
      background: #393b45;
      text-align: center;
      line-height: 60rpx;
      box-shadow: 0 0 3rpx 3rpx #000;
      color: #fff;
      border-radius: 6rpx;
    }
  }
}
.tab-bar-container {
  background: #000 !important;
}
</style>
